<!-- // 悬浮按钮组件 -->
<template>
  <div class="zixun-wrapper">
    <div
      :class="zoomInOn ? 'zixu-box zuiXiaoHua' : 'zixu-box '"
      v-drag
      draggable="false"
    >
      <div :class="zoomInOn ? 'zixu-header zuiXiaoHua-header' : 'zixu-header'">
        <span class="zixu-header-title">留言板</span>
        <span class="zixun-header-min"
          ><i
            :class="zoomInOn ? 'ifont icon-zuidahua' : 'ifont icon-zuixiaohua1'"
            @click="zoomInOn = !zoomInOn"
          ></i
        ></span>
      </div>
    </div>
    <div class="zixun-form-box">
      <textarea
        class="luyan-input"
        v-model="form.message"
        placeholder="请在此输入留言内容，我们会尽快与您联系。（必填）"
      ></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zoomInOn: false,
      form: {
        message: ""
      }
    };
  },
  watch: {
    "form.message"(e) {
      console.log(e);
    }
  },
  methods: {},
  directives: {
    // zixun-textarea
    drag(el) {
      let oDiv = el; // 当前元素
      // let self = this // 上下文
      // 禁止选择网页上的文字
      document.onselectstart = function() {
        return false;
      };
      oDiv.onmousedown = function(e) {
        // 鼠标按下，计算当前元素距离可视区的距离
        let disX = e.clientX - oDiv.offsetLeft;
        let disY = e.clientY - oDiv.offsetTop;
        // console.log(disX, disY);
        document.onmousemove = function(e) {
          // 通过事件委托，计算移动的距离
          let l = e.clientX - disX;
          let t = e.clientY - disY;
          // 移动当前元素
          if (l > 0) {
            oDiv.style.left = l + "px";
          }
          if (t > 70) {
            oDiv.style.top = t + "px";
          }
        };
        document.onmouseup = function(e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
        // return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
        return false;
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.zixun-wrapper {
  position: relative;
}
.zixun-form-box {
  height: 20rem;
  width: 20rem;
  position: fixed;
  left: 0;

  z-index: 999;
  border: 5px #000000 solid;
}
.zuiXiaoHua-header {
  border-radius: 8px !important;
}
.zixu-box {
  width: 255px;
  height: 326px;
  position: fixed;
  right: 20px;
  bottom: 10px;
  cursor: pointer;
  background-color: white;
  border-radius: 8px;
  z-index: 10;
  box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.4);
  outline: none;
  -webkit-transition: height 0.4s;
  -moz-transition: height 0.4s;
  -ms-transition: height 0.4s;
  transition: height 0.4s;
}
.zuiXiaoHua {
  height: 45px !important;
}
.zixu-header {
  height: 46px;
  background-color: #4e6ef2;
  cursor: move;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
  border-radius: 8px 8px 0 0;
  -webkit-transition: border-radius 1s;
  -moz-transition: border-radius 1s;
  -ms-transition: border-radius 1s;
  transition: border-radius 1s;
}
.zixu-header-title {
  height: 46px;
  line-height: 46px;
  font-size: 14px;
  padding-left: 12px;
  float: left;
  display: inline;
  color: #fff;
}
.zixun-header-min {
  width: 40px;
  height: 46px;
  float: right;
  display: inline;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  .ifont {
    margin-left: 10px;
  }
  .icon-zuixiaohua1 {
    color: white;
    line-height: 46px;
    text-align: center;
  }
  .icon-zuidahua {
    color: white;
    line-height: 46px;
    text-align: center;
  }
}
.zixu-box:hover {
  color: white;
}
</style>
